<template>
	<z-nav-bar :title="data && data.data.dictLabel"></z-nav-bar>
	<view v-if="data">
		<view v-for="(item, index) in data.list" :key="item.id" class="item-box">
			<view>{{ item.dictLabel }}</view>
			<view v-if="item.cssClass == '4' && evaluationData['item' + item.dictCode]" class="input-box">
				<uni-rate allow-half :value="evaluationData['item' + item.dictCode].value / 2" readonly />
			</view>
			<view v-else-if="item.cssClass == '5'">
				<view v-for="(tag, tindex) in evaluationData['item' + item.dictCode] || []" :key="tindex">
					<view class="tag-title">{{ item.dictLabel }}{{ tindex + 1 }}</view>
					<view v-for="(key, kindex) in keyList" :key="kindex" class="uni-mt-16">
						<view>{{ key.name }}</view>
						<view v-if="tag[key.key]" class="flex_fsc uni-mt-16 flex_wrap">
							<view v-for="tagObj in tag[key.key].obj" class="tag">
								{{ tagObj.map((el) => el.dictValue).join('-->') }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="input-box">
				{{ evaluationData['item' + item.dictCode] ? evaluationData['item' + item.dictCode].value : '未评测'
				}}{{ item.cssClass == '3' ? item.dictExtF : item.cssClass == '2' ? item.dictExtS : '' }}
			</view>
		</view>
		<navigator open-type="navigateBack">
			<bottom-box :buts="buts"></bottom-box>
		</navigator>
	</view>
</template>

<script setup>
const localData = uni.getStorageSync('evaluation-data');
const { ev: evaluationData, data } = JSON.parse(localData.result);
const keyList = [
	{
		name: '添加问题描述标签',
		key: 'descriptionTag'
	},
	{
		name: '添加问题原因',
		key: 'reason'
	},
	{
		name: '添加身体位置',
		key: 'bodyPosition'
	}
];

const buts = [{
	label: '重新评测',
	color: '#008965',
	type: 'empty'
}]
console.log(evaluationData);
console.log(data);
</script>

<style lang="scss" scoped>
.item-box {
	width: 100vw;
	height: 172rpx;
	box-sizing: border-box;
	padding: 20rpx 40rpx;
	font-size: 28rpx;

	.input-box {
		width: 670rpx;
		background: #f8f9fa;
		box-sizing: border-box;
		padding: 16rpx;
		margin-top: 16rpx;
	}
}

.tag-title {
	width: 100%;
	background: #008965;
	box-sizing: border-box;
	padding: 10rpx 16rpx;
	margin-top: 16rpx;
	color: #ffffff;
	font-size: 24rpx;
	border-radius: 16rpx;
}

.tag {
	border-radius: 8rpx;
	color: $uni-585C66;
	background: $uni-F5F5F5;
	padding: 10rpx 28rpx;
	margin-right: 20rpx;
	margin-bottom: 16rpx;
}
</style>
